<template>
  <div class="left-but">
    <ul>
      <li
        v-for="(itme, index) in arr"
        :key="itme.id"
        :class="num == itme.id ? 'color' : ''"
        @click="qiangji(index)"
      >
        {{ itme.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        { id: 1, name: "首页" },
        { id: 2, name: "文本工具" },
        { id: 3, name: "励志句子" },
        { id: 4, name: "心灵鸡汤" },
        { id: 5, name: "舔狗日记" },
        { id: 6, name: "便民查询" },
        { id: 7, name: "开发工具" },
        { id: 8, name: "编码加密" },
        { id: 9, name: "站长工具" },
      ],
      num: 3,
    };
  },
  methods: {
    qiangji(i) {
      this.num = i + 1;
      this.$router.push({
        path: "hello",
        query: {num:this.num},
      });
    },
  },
};
</script>

<style scoped lang="scss">
.left-but {
  width: 100%;
  ul {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    list-style: none;
    margin-top: 30px;
    li {
      cursor: pointer;
      color: #b8b8b8;
      margin: 5px 0;
    }
    li:hover {
      color: #4caf50;
    }
    .color {
      color: #4caf50;
    }
  }
}
</style>